<script setup>
  import { ref, onMounted, onUpdated, onBeforeUpdate } from 'vue';

  let message = ref('hello');

  onMounted(() => {
    console.log('组件挂载之后.....');
    let span = document.getElementById("id");
    console.log('组件挂载之后span = ' + span.innerText);
  });

  onBeforeUpdate(() => {
    console.log('组件更新之前.....')
    let span = document.getElementById("id");
    console.log('组件更新之前span = ' + span.innerText);
  });

  onUpdated(() => {
    console.log('组件更新之后.....')
    let span = document.getElementById("id");
    console.log('组件更新之后span = ' + span.innerText);
  });

</script>

<template>
  <div>
    <span v-bind:id="'id'" style="background-color: aqua;" v-text="message"></span><br>
    <input v-bind:type="'input'" v-model="message" />
  </div>
</template>

<style scoped>

</style>
